<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单视频测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .test-section {
            margin: 20px 0;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        video {
            width: 100%;
            max-width: 600px;
        }
        .status {
            margin: 10px 0;
            padding: 10px;
            border-radius: 4px;
        }
        .success { background-color: #d4edda; color: #155724; }
        .error { background-color: #f8d7da; color: #721c24; }
        .info { background-color: #d1ecf1; color: #0c5460; }
    </style>
</head>
<body>
    <h1>跨域视频访问测试</h1>
    <p>当前页面: <code>http://localhost:5173</code></p>
    <p>视频服务器: <code>http://localhost:806</code></p>

    <div class="test-section">
        <h2>测试1: 直接视频元素</h2>
        <video id="video1" controls crossorigin="anonymous">
            <source src="http://localhost:806/public/chap02/videos/2.1前端开发环境.mp4" type="video/mp4">
            您的浏览器不支持视频播放。
        </video>
        <div id="status1" class="status info">等待加载...</div>
    </div>

    <div class="test-section">
        <h2>测试2: 使用编码URL</h2>
        <video id="video2" controls crossorigin="anonymous">
            <source src="http://localhost:806/public/chap02/videos/2.1%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83.mp4" type="video/mp4">
            您的浏览器不支持视频播放。
        </video>
        <div id="status2" class="status info">等待加载...</div>
    </div>

    <div class="test-section">
        <h2>测试3: JavaScript动态设置</h2>
        <video id="video3" controls crossorigin="anonymous">
            您的浏览器不支持视频播放。
        </video>
        <div id="status3" class="status info">等待加载...</div>
    </div>

    <script>
        // 测试1
        const video1 = document.getElementById('video1');
        const status1 = document.getElementById('status1');

        video1.addEventListener('loadstart', () => {
            status1.textContent = '开始加载...';
            status1.className = 'status info';
        });

        video1.addEventListener('canplay', () => {
            status1.textContent = '✅ 视频可以播放！';
            status1.className = 'status success';
        });

        video1.addEventListener('error', (e) => {
            status1.textContent = `❌ 加载失败: ${e.target.error?.message || '未知错误'}`;
            status1.className = 'status error';
            console.error('Video1 error:', e);
        });

        // 测试2
        const video2 = document.getElementById('video2');
        const status2 = document.getElementById('status2');

        video2.addEventListener('loadstart', () => {
            status2.textContent = '开始加载...';
            status2.className = 'status info';
        });

        video2.addEventListener('canplay', () => {
            status2.textContent = '✅ 编码URL视频可以播放！';
            status2.className = 'status success';
        });

        video2.addEventListener('error', (e) => {
            status2.textContent = `❌ 编码URL加载失败: ${e.target.error?.message || '未知错误'}`;
            status2.className = 'status error';
            console.error('Video2 error:', e);
        });

        // 测试3
        const video3 = document.getElementById('video3');
        const status3 = document.getElementById('status3');

        // 动态设置视频源
        const source3 = document.createElement('source');
        source3.src = encodeURI('http://localhost:806/public/chap02/videos/2.1前端开发环境.mp4');
        source3.type = 'video/mp4';
        video3.appendChild(source3);

        video3.addEventListener('loadstart', () => {
            status3.textContent = '开始加载...';
            status3.className = 'status info';
        });

        video3.addEventListener('canplay', () => {
            status3.textContent = '✅ 动态设置的视频可以播放！';
            status3.className = 'status success';
        });

        video3.addEventListener('error', (e) => {
            status3.textContent = `❌ 动态设置加载失败: ${e.target.error?.message || '未知错误'}`;
            status3.className = 'status error';
            console.error('Video3 error:', e);
        });

        // 加载视频
        video3.load();

        // 网络请求测试
        console.log('开始网络测试...');
        
        fetch('http://localhost:806/public/chap02/videos/2.1前端开发环境.mp4', {
            method: 'HEAD',
            mode: 'cors'
        })
        .then(response => {
            console.log('Fetch test success:', response.status, response.headers);
        })
        .catch(error => {
            console.error('Fetch test failed:', error);
        });
    </script>
</body>
</html>